<style lang="scss" scoped>
  @import '@/assets/css/variable';
  .my-img{
    width: 100%;
	min-height: 120px;
    // border-radius: 0.6rem;
    box-sizing: border-box;
    position: relative;
    border: 1px solid $border-c-l;
    box-sizing: border-box;
    .close-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: -0.7rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .down-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: 4rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .up-icon{
      position: absolute;
      width: 2rem;
      height: 2rem;
      right: 8rem;
      top: -0.7rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .change-pic{
      position: absolute;
      width: 10rem;
      height: 2.8rem;
      right: 0rem;
      bottom: 0.1rem;
      border-top-left-radius: 0.6rem;
      // border-bottom-right-radius: 0.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.7);
      color: white;
      font-size: 1.2rem;
    }
  }
</style>

<template>
  <div class="my-img">
    <span class="close-icon" :style="{backgroundColor:mainColor}" @click="deleteBtn"><van-icon color="white" name="cross" /></span>
    <span class="down-icon" :style="{backgroundColor:mainColor}"><van-icon color="white" name="arrow-down" @click="downBtn"/></span>
    <span class="up-icon" :style="{backgroundColor:mainColor}"><van-icon color="white" name="arrow-up"  @click="upBtn"/></span>
    <van-image
      fit="contain"
      :src="content"
    />
    <span class="change-pic" @click="changePic">更换图片</span>
    <input
      type="file"
      class="file-input d-none"
      ref="fileInput"
      @change="handleFileChange"
    >
  </div>
</template> 
<script>
import { Image as VanImage } from 'vant';
import { Icon, Toast } from 'vant';
import utils from '@/assets/js/utils.js'
//注册子组件
export default {
  components: {
    [Icon.name]: Icon,
    VanImage
  },
  props: {
    value: String,
    id: Number,
    index: Number
  },
  computed: {
  },
  data() {
    return {
      content: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d6d772e8-edba-4e51-a6a3-850f3326ab0d/950976dd-ac96-4f56-8965-8d8d3ba1438e.jpg",
      mainColor: "#FF0000"
    }
  },
  created () {
    const _this = this;
    const mainColor = _this.$store.getters.getMainColor;
    if(mainColor){
      _this.mainColor = mainColor;
    }else{
      //调用接口获取mainColor
    }
    // 把父组件传来得值赋值给content,通过修改content来把修改后的content传递给父组件
    this.content = this.value || 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d6d772e8-edba-4e51-a6a3-850f3326ab0d/950976dd-ac96-4f56-8965-8d8d3ba1438e.jpg';
    //const caseList = _this.$store.getters.getCaseTabsList;
  },
  methods: {
    handleFileChange(e) {
      const _this = this;
      const img = e.target.files[0];
      if (img.type != 'image/jpeg' && img.type != 'image/png' && img.type != 'image/gif') {
        Toast('请上传jpg、png、gif格式的图片');
        return false;
      }
      if(img.size > 3000 * 1024) {
        Toast("图片大小请不要超过3M")
        return
      }
      utils.blobToDataURL(img, (base64Url) => {
        _this.content = base64Url;
        const item = {
          id: _this.id,
          value: base64Url
        }
        _this.$emit("ChangeFile", item)
      });
    },
    changePic() {
      this.$refs.fileInput.click()
    },
    upBtn() {
      this.$emit("upIntroduceItem", this.index)
    },
    downBtn() {
      this.$emit("downIntroduceItem", this.index)
    },
    deleteBtn() {
      this.$emit("deleteIntroduceItem", this.id)
    }
  }
};
</script>
